<!--
 * @Descripttion: 
 * @version: 
 * @Author: wangys
 * @Date: 2022-06-08 15:15:23
-->
<template>
  <div class="Article-container">
    <div class="top">
      <!-- 轮播图 -->
      <Banner></Banner>
      <!-- 个人简介 -->
      <ShowMe></ShowMe>
    </div>
    <div class="Article">
      <div class="left">
        <!-- 文章标题组件 -->
        <ArticleTitle></ArticleTitle>
        <!-- 文章内容组件 -->
        <ArticleItem></ArticleItem>
      </div>
      <div class="right">
        <!-- 显示分类部分 -->
        <Segment :data="true"></Segment>
        <!-- 显示标签部分 -->
        <Segment :data="false"></Segment>
        <div class="author">联系作者</div>
        <div class="weixin">
          <img src="@/assets/img/weixin.jpg" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Banner from './Banner.vue'
import ShowMe from './ShowMe.vue'
import ArticleItem from '../../../components/ArticleItem.vue'
import ArticleTitle from '../../../components/ArticleTitle.vue'
import Segment from './Segment.vue'
export default {
  name: 'Article',

  components: {
    Banner,
    ShowMe,
    ArticleItem,
    ArticleTitle,
    Segment
  }
}
</script>

<style lang="less" scoped>
.Article-container {
  width: 1080px;
  margin: 50px auto 0;
  .top {
    display: flex;
  }
  .Article {
    display: flex;
    .right {
      .author {
        text-align: center;
      }
      .weixin {
        position: relative;
        width: 100%;
        height: 200px;
        margin: 10px 0 0 50px;
        img {
          width: 155px;
          height: 155px;
          margin: 10px 0 0 50px;
          box-shadow: 2px 0px 10px 10px rgba(124, 182, 255, 0.6);
          &:hover {
            width: 200px;
            height: 200px;
            margin: 0px 0 0 30px;
          }
        }
      }
    }
  }
}
</style>
